<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-4.6.0-dist/css/bootstrap.css">
  <link rel="stylesheet" href="./index.css">
  <script src="./jquery-3.6.0.js"></script>
  <script src="./bootstrap-4.6.0-dist/js/bootstrap.js"></script>
</head>

<body>
  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-light mynavbar">
    <div class="container">
      <a class="navbar-brand mr-4 logo" href="#">Bootstrap 中文文档</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="collapse navbar-collapse row" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto col-sm-12 col-lg-7 float-left">
          <li class="nav-item">
            <a class="nav-link" href="#">入门</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">全局CSS样式</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">组件</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">JavaScript插件</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">定制</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">网站实例</a>
          </li>
        </ul>
        <ul class="navbar-nav mr-auto  col-sm-12 col-lg-5 float-right">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              v3
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">v5</a>
              <a class="dropdown-item" href="#">v4</a>
              <a class="dropdown-item" href="#">v3</a>
              <a class="dropdown-item" href="#">v2</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">优站精选</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">官方博客</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">返回Bootstrap中文网</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 导航条下面bootstrap介绍模块 -->
  <div class="container-fuild content pt-5 pb-5">
    <div class="container satge mt-5">
      <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
      <p class="lead text-center">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
      <p class="lead text-center">
        <a href="/getting-started/#download" class="btn download btn-outline-inverse btn-lg"
          onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3首页大图-下载 3.4.1 按钮'])">下载 Bootstrap</a>
      </p>
      <p class="version text-center">当前版本： v3.4.1 | 文档更新于：2021-06-10</p>
      <div id="tuijian"></div>
    </div>
  </div>

  <!-- 为所有开发者、所有应用场景而设计 -->
  <div class="box">
    <div class="container">
      <div class="box-hd">
        <h1 class="text-center">为所有开发者、所有应用场景而设计</h1>
        <div class="title">
          <p class="title-text text-center">Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。</p>
        </div>
      </div>

      <div class="about row mb-5 clearfix">
        <div class="item col-sm-12 col-lg-4 col-xs-12 float-left">
          <div>
            <div class="photo">
              <img src="./imgage/sass-less.png" alt="">
            </div>
            <h3 class="text-center">预处理工具</h3>
          </div>
          <p>虽然可以直接使用 Bootstrap 提供的 CSS 样式表，但是不要忘记，Bootstrap 的源码是采用最流行的 CSS 预处理工具 Less 和 Sass 开发的。你可以直接采用预编译的 CSS
            文件快速开发，也可以从 Bootstrap 源码自定义自己需要的样式。</p>
        </div>
        <div class="item col-sm-12 col-lg-4 float-left">
          <div>
            <div class="photo">
              <img src="./imgage/devices.png" alt="">
            </div>
            <h3 class="text-center">一个框架、多种设备。</h3>
          </div>
          <p>你的网站和应用能在 Bootstrap 的帮助下通过同一份源码快速、有效地适配手机、平板和 PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。</p>
        </div>
        <div class="item col-sm-12 col-lg-4 float-left">
          <div>
            <div class="photo">
              <img src="./imgage/components.png" alt="">
            </div>
            <h3 class="text-center d-xs-none">功能完备</h3>
          </div>
          <p>Bootstrap 提供了全面、美观的文档，你能在这里找到关于普通 HTML 元素、HTML 和 CSS 组件以及 jQuery 插件方面的所有详细文档。</p>
        </div>
      </div>

      <div class="text-center lead mb-3">Bootstrap 是完全开源的。代码的托管、开发和维护都在 GitHub 平台上完成。</div>
      <div class="goin text-center m-auto">查看GitHub项目主页</div>
    </div>

    <div class="website pt-5">
      <div class="substance container">
        <h1 class="text-center">基于 Bootstrap 构建的网站</h1>
        <p class="text-center lead">全球数以百万计的网站都是基于 Bootstrap 构建的。你可以先参观一下我们提供的 <a href="" class="">实例精选</a>
          或者看一看我们粉丝的网站吧。</p>
        <p class="line"></p>
        <div class="mt-5 show">
          <div class="text-center more-web lead">我们在“优站精选”里展示了许多精美的 Bootstrap 网站。</div>
          <div class="goin text-center m-auto">逛一逛“优站精选”</div>
        </div>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="middle container">
      <ul class="clearfix">
        <li class="float-left mr-4"><a href="">GitHub</a></li>
        <li class="float-left mr-4"><a href="">Twitter</a></li>
        <li class="float-left mr-4"><a href="">实例</a></li>
        <li class="float-left mr-4"><a href="">关于</a></li>
      </ul>
      <p>Designed and built with all the love in the world by <a href="">@mdo</a> and <a href="">@fat</a>. Maintained by
        the <a href="">core team</a> with the help of <a href="">our contributors.</a></p>
      <p>Code licensed <a href="">MIT</a>, docs <a href="">CC BY 3.0.</a> </p>
    </div>
  </div>
</body>

</html>